<template>
	<el-row class="lives-news">
		<el-row class="title">
			<h3>Storage</h3>
		</el-row>
		<el-row>
			<el-form :inline="true">
			    <el-form-item>
			        <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加Storage</el-button>
			    </el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="storageList" :row-style="{fontSize:'12px'}" border>
				<el-table-column prop="key" label="key" align="center" width="120px"></el-table-column>
                <el-table-column prop="value" label="value" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="showUpdateStoragePopup(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="deleteStorage(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
			</el-table>
		</el-row>
		<el-dialog title="新增Storage" :visible.sync="addDialog" width="800px" @close="closeDialog" class="dialog">
		    <el-form :model="addStorage" label-width="120px">
		        <el-form-item label="key">
		            <el-input type="text" v-model="addStorage.key" auto-complete="off" placeholder="key"></el-input>
		        </el-form-item>
		        <el-form-item label="value">
	                    <el-input
	                      type="textarea"
	                      :rows="2"
	                      placeholder="请输入内容"
	                      v-model="addStorage.value">
	                    </el-input>
                	</el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="closeDialog">取 消</el-button>
		        <el-button type="primary" @click="addStorageFn" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
		<el-dialog title="修改Storage" :visible.sync="updateStorageDialog" width="400px" @close="closeUpdateStorageDialog" class="dialog">
			    <el-form :model="value" label-width="120px">
			        <el-form-item label="value">
	                    <el-input
	                      type="textarea"
	                      :rows="2"
	                      placeholder="请输入内容"
	                      v-model="value.value">
	                    </el-input>
                	</el-form-item>
			    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="cancelUpdateStorage">取 消</el-button>
		        <el-button type="primary" @click="updateStorageFn" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
	</el-row>
</template>
<script>
import {
	getStorageLists,
	addStorages,
	deleteStorageByKey,
	updateStorageByKey
} from '@/api/api'
export default {
	data: function(){
		return {
			addDialog: false,
			addLoading: false,
			updateStorageDialog: false,
			storageList: null,
			addStorage: {
				key: null,
				value: null
			},
			value: {
				key: null,
				value : null
			},
			key : ''
		}
	},
	created: function(){
		this.getStorageList();
	},
	methods: {
		getStorageList: function(){
			getStorageLists({params: this.params}).then(res => {
				this.storageList =res;
			})
		},
		showAddDialog: function(){
			this.addDialog = true;
		},
		closeDialog: function(){
			this.addDialog = false;
			this.addStorage = {
				key: null,
				value: null
			}
		},
		addStorageFn: function(){
			console.log(this.addStorage.key)
			addStorages(this.addStorage).then(res => {
				this.getStorageList();
				this.$message({
					type: 'success',
					message: '添加成功'
				})
				this.addDialog = false;
			})
		},
		deleteStorage: function(index, row){
            this.$confirm('是否删除该本条记录?', '删除本条记录', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
            	deleteStorageByKey(row.key).then(res => {
					this.getStorageList();
					this.$message({
						type: 'success',
						message: '删除成功'
					})
					this.addDialog = false;
				})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
		},
		closeUpdateStorageDialog: function(){
			this.updateStorageDialog = false;
			this.key = '';
			this.value = {
				 value: null
			}
		},
		cancelUpdateStorage: function(){
			this.closeUpdateStorageDialog()
		},
		showUpdateStoragePopup: function(index, row){
			this.updateStorageDialog = true;
			this.value.key = row.key;
			this.value.value = row.value;
		},
		updateStorageFn: function(){
			console.log(this.value)
			updateStorageByKey(this.value).then(res => {
				this.getStorageList();
				this.$message({
					type: 'success',
					message: '修改成功'
				})
				this.updateStorageDialog = false;
			})
		}
	}
}
</script>
<style scoped>
.title {
    font-size: 12px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 5px;
    
}
h3 {
    display: inline-block;
    padding: 5px 0;
    margin: 0;
    font-weight: normal;
    color: #23b7e5;
    border-bottom: 1px solid #23b7e5;
}
</style>